<template>
	<a-popover trigger="click" placement="bottomRight" :overlayStyle="{ width: '300px' }">
		<template slot="content">
			<a-spin :spinning="loadding">
				<a-tabs>
					<a-tab-pane v-for="(tab, k) in tabs" :tab="tab.title" :key="k"> </a-tab-pane>
				</a-tabs>
			</a-spin>
		</template>
		<span @click="fetchNotice" class="header-notice">
			<a-badge count="12">
				<a-icon style="font-size: 16px; padding: 4px" type="bell" />
			</a-badge>
		</span>
	</a-popover>
</template>

<script>
export default {
	name: "HeaderNotice",
	props: {
		tabs: {
			type: Array,
			default: null,
			required: true,
		},
	},
	data() {
		return {
			loadding: false,
		};
	},
	methods: {
		fetchNotice() {
			if (this.loadding) {
				this.loadding = false;
				return;
			}
			this.loadding = true;
			setTimeout(() => {
				this.loadding = false;
			}, 2000);
		},
	},
};
</script>

<style lang="less" scoped>
.header-notice {
	display: inline-block;
	transition: all 0.3s;
	span {
		vertical-align: initial;
	}
}
</style>
